<template>
	<el-card>
		<el-space>
			<el-space>
				<el-button type="primary" @click="addOrUpdateHandle(true, {})">新增</el-button>
			</el-space>
		</el-space>
		<el-table
			v-loading="state.dataListLoading"
			class="layout-table"
			:data="state.dataList"
			row-key="id"
			:tree-props="treeProps"
			@selection-change="selectionChangeHandle"
		>
			<el-table-column prop="name" label="标签名称" header-align="center" align="center"> </el-table-column>

			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="100">
				<template #default="scope">
					<el-icon :size="16" color="#1491FF" title="编辑" style="cursor: pointer; margin: 0 6px" @click="addOrUpdateHandle(false, scope.row)">
						<Edit />
					</el-icon>
					<el-icon :size="16" color="#fe6360" title="删除" style="cursor: pointer; margin: 0 6px" @click="deleteHandle(scope.row)">
						<Delete />
					</el-icon>
				</template>
			</el-table-column>
		</el-table>

		<!-- 新增编辑 -->
		<mainUpdate ref="updateRecordRef" :modal-title="state.modalTitle" @refresh-data-list="getDataList"></mainUpdate>
	</el-card>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import { categoryAllApi, categoryListApi, categoryDelApi } from '@/api/tag/base'
import mainUpdate from './components/mainUpdate.vue'

const state = reactive({
	queryForm: {
		date: '',
		unit: '',
		no: ''
	},
	pageNum: 1,
	pageSize: 10,
	total: 1,
	dataListLoading: false,
	dataList: [],
	visible: false,
	modalTitle: '',
	allCategoryList: [],
	categoryType: 11
})

const treeProps = reactive({
	// checkStrictly: false,
})

// const getAllCategoryList =  async () => {
//     await categoryAllApi().then(res => {
// 		state.allCategoryList = res.data
// 	})
// }
const getDataList = async () => {
	await categoryListApi(state.categoryType).then(res => {
		// console.log(res.data)
		state.dataListLoading = false
		state.dataList = res.data
	})
}
const updateRecordRef = ref()

const reset = () => {}

const addOrUpdateHandle = (isUpdate: Boolean, row: any) => {
	if (isUpdate) {
		state.modalTitle = '新增'
		var obj = {
			type: state.categoryType,
			name: '',
			weight: 0,
			remark: ''
		}
		Object.assign(row, obj)
	} else {
		state.modalTitle = '编辑'
		row['type'] = state.categoryType
	}
	console.log(row)
	updateRecordRef.value.init(isUpdate, row)
}
const delMethods = async (row: any) => {
	var params = {
		id: row.id
	}
	await categoryDelApi(params).then(res => {
		ElMessage.success({
			message: '操作成功',
			duration: 500
		})
		getDataList()
	})
}
const deleteHandle = (row: any) => {
	ElMessageBox.confirm('是否删除?', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			delMethods(row)
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '删除失败'
			})
		})
}

const selectionChangeHandle = () => {}

onMounted(() => {
	getDataList()
	// getAllCategoryList()
})
</script>

<style scoped>
.base-add {
	text-align: right;
	margin-bottom: 10px;
}
</style>
